<template>
  <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
    <div class="mb-3">
      <div class="flex items-center justify-between mb-2">
        <div class="flex items-center space-x-2">
          <span v-if="job.urgent" class="bg-orange-100 text-orange-500 text-xs px-2 py-0.5 rounded">急聘</span>
          <span v-if="job.featured" class="bg-red-100 text-red-500 text-xs px-2 py-0.5 rounded">置顶</span>
        </div>
        <span :class="statusClasses" class="px-2 py-1 rounded-full text-xs">
          {{ statusText }}
        </span>
      </div>
      <h3 class="font-medium text-gray-800 mb-1">{{ job.title }}</h3>
      <div class="text-sm text-gray-500">{{ job.department || '未分配部门' }}</div>
    </div>
    
    <div class="text-sm text-gray-600 mb-3 space-y-1">
      <div>{{ job.location }} · {{ job.salary }}</div>
      <div>{{ job.experience }} · {{ job.education }}</div>
    </div>
    
    <div class="flex items-center justify-between text-xs text-gray-400 mb-4">
      <div class="flex space-x-3">
        <span>浏览 {{ job.views }}</span>
        <span>沟通 {{ job.communications }}</span>
      </div>
      <span>{{ job.createdAt }}</span>
    </div>
    
    <div class="flex space-x-2">
      <button 
        @click="$emit('viewApplications', job.id)"
        class="flex-1 py-1.5 text-primary border border-primary rounded text-sm hover:bg-primary hover:text-white transition-colors"
      >
        查看投递
      </button>
      <button 
        @click="$emit('edit', job.id)"
        class="px-3 py-1.5 text-gray-600 border border-gray-300 rounded text-sm hover:bg-gray-50"
      >
        <i class="ri-edit-line"></i>
      </button>
      <button 
        @click="$emit('delete', job.id)"
        class="px-3 py-1.5 text-red-600 border border-red-300 rounded text-sm hover:bg-red-50"
      >
        <i class="ri-delete-bin-line"></i>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Job } from '../types'

interface Props {
  job: Job
}

const props = defineProps<Props>()

defineEmits<{
  edit: [jobId: string]
  delete: [jobId: string]
  toggleStatus: [jobId: string]
  viewApplications: [jobId: string]
}>()

const statusClasses = computed(() => {
  switch (props.job.status) {
    case 'active':
      return 'bg-green-100 text-green-600'
    case 'pending':
      return 'bg-yellow-100 text-yellow-600'
    case 'closed':
      return 'bg-gray-100 text-gray-600'
    case 'failed':
      return 'bg-red-100 text-red-600'
    default:
      return 'bg-gray-100 text-gray-600'
  }
})

const statusText = computed(() => {
  switch (props.job.status) {
    case 'active':
      return '招聘中'
    case 'pending':
      return '待审核'
    case 'closed':
      return '已关闭'
    case 'failed':
      return '审核失败'
    default:
      return '未知状态'
  }
})
</script>
